<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.view {
		  border: 1px solid red;
		  height: 2000px;
		  position: relative;
		}
	</style>
</head>
<body>

	<div id="app"></div>
	
	<script src="node_modules/vue/dist/vue.min.js"></script>
	<script src="node_modules/vue-router/dist/vue-router.min.js"></script>
	<script>
		
		var Home = { template: '<div>home</div>' }
		var Foo = { template: '<div>foo</div>' }
		var Bar = {
		  template: `
		    <div>
		      bar
		      <div style="height:500px"></div>
		      <p id="anchor">Anchor</p>
		    </div>
		  `
		}

		// scrollBehavior:
		// - only available in html5 history mode
		// - defaults to no scroll behavior
		// - return false to prevent scroll
		var scrollBehavior = (to, from, savedPosition) => {
		  if (savedPosition) {
		    // savedPosition is only available for popstate navigations.
		    return savedPosition
		  } else {
		    var position = {}
		    // new navigation.
		    // scroll to anchor by returning the selector
		    if (to.hash) {
		      position.selector = to.hash
		    }
		    // check if any matched route config has meta that requires scrolling to top
		    if (to.matched.some(m => m.meta.scrollToTop)) {
		      // cords will be used if no selector is provided,
		      // or if the selector didn't match any element.
		      position.x = 0
		      position.y = 0
		    }
		    // if the returned position is falsy or an empty object,
		    // will retain current scroll position.
		    return position
		  }
		}

		var router = new VueRouter({
		  // mode: 'history',
		  // base: __dirname,
		  scrollBehavior,
		  routes: [
		    { path: '/', component: Home, meta: { scrollToTop: true }},
		    { path: '/foo', component: Foo },
		    { path: '/bar', component: Bar, meta: { scrollToTop: true }}
		  ]
		})

		new Vue({
		  router,
		  template: `
		    <div id="app">
		      <h1>Scroll Behavior</h1>
		      <ul>
		        <li><router-link to="/">/</router-link></li>
		        <li><router-link to="/foo">/foo</router-link></li>
		        <li><router-link to="/bar">/bar</router-link></li>
		        <li><router-link to="/bar#anchor">/bar#anchor</router-link></li>
		      </ul>
		      <router-view class="view"></router-view>
		    </div>
		  `
		}).$mount('#app');

	</script>
</body>
</html>